<template>
  <div class="complaint-contail">
    <van-nav-bar class="header van-nav-bar_none"
                 title="投诉管理"
                 left-arrow
                 @click-left="$router.goBack()" />
    <div>
      <div class="fengniao-content">
        <van-tabs sticky
                  swipeable
                  v-model="active">
          <van-tab title="待办">
          </van-tab>
          <van-tab title="已办">
          </van-tab>
          <van-tab title="全部">
          </van-tab>
        </van-tabs>
      </div>
      <van-pull-refresh v-model="isLoading"
                        @refresh="onRefresh">
        <div class="fengniao-tip"
             v-if="tip">暂时没有数据</div>
        <van-list v-model=" loading "
                  :finished="finished "
                  @load="onLoad ">
          <div v-for="(item,index) in list"
               :key="index"
               @click.stop="detail(item,index)"
               class="fengniao-list">
            <div class="fengniao-content item">
              <div class="header">
                <span class="title"
                      v-text="item.description"></span>
                <el-tag type="info"
                        size="small">{{item.statusName}}</el-tag>
              </div>

              <span class="date"
                    v-text="item.suggestTime"></span>
            </div>
          </div>
        </van-list>

      </van-pull-refresh>
    </div>
  </div>
</template>

<script>

import { mapGetters } from 'vuex';
import { getList, delObj } from '@/api/complaint/index';
import { validatenull } from '@/util/validate';
import baseCommon from '@/mixins/common';

export default {
  name: 'complaintContail',
  mixins: [baseCommon()],
  data() {
    return {
      active: 0,
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      tip: false,
      page: {
        total: 0,
        ownerId: undefined,
        page: 1,
        limit: 10,
      },
    };
  },
  created() {
    this.page.ownerId = this.userInfo.ownerId;
  },
  watch: {
    active(n, o) {
      this.onRefresh();
    },
  },
  mounted() { },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    detail(item, index) {
      this.goPage('/complaint/detail', '', {
        id: item.id,
      });
    },
    onRefresh() {
      this.tip = false;
      this.page.page = 1;
      getList(Object.assign(this.page, { type: this.active })).then((res) => {
        const data = res.data;
        this.page.total = data.total;
        this.list = data.records;
        this.isLoading = false;
        this.finished = false;
        this.onLoad();
      });
    },
    onLoad() {
      this.tip = false;
      getList(Object.assign(this.page, { type: this.active })).then((res) => {
        this.setPage(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.complaint-contail {
  .header {
    margin-bottom: 10px;
  }
  .list {
    padding: 20px 15px;
    .header {
      margin-bottom: 10px;
      font-size: 14px;
      color: #4e545d;
      line-height: 22px;
      .title {
      }
    }
    .date {
      font-size: 10px;
      color: #c2c2c2;
    }
    .menu {
      position: relative;
      display: flex;
      justify-content: flex-end;
      .btn {
        display: flex;
        align-items: center;
        font-size: 14px;
        i {
          margin-top: 1px;
          margin-left: 10px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>

